<template>
    <div class="commonUser">
        <el-row :gutter="4" style="margin:10px 0px">
            <el-col :span="3">
                <el-input size="small" placeholder="按用户昵称查询" v-model="nickName" class="input-with-select">
                    <el-button @click="search('nickName')" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="3">
                <el-input size="small" placeholder="按用户手机号查询" v-model="mobile" class="input-with-select">
                    <el-button @click="search('mobile')" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <slot name="member"></slot>
            <el-col :span="3">
               <el-select @change="search('userStatus')" placeholder="按是否解冻" size="small" v-model="freezeStatus">
                   <el-option v-for="(item, index) in freezeData" :key="index" :label="item.label" :value="item.value"></el-option>
               </el-select>
            </el-col>
            <el-col :span="5">
                <el-button size="small" type="primary" @click="search('clear')">清空</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="noticeData" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="200" align="center" :index="indexSort">
                </el-table-column>
                <el-table-column prop="createDate" label="注册时间" align="center">
                </el-table-column>
                <el-table-column prop="nickName" label="用户昵称" align="center">
                </el-table-column>
                 <el-table-column style="" prop="mobile" label="手机号码" align="center">
                </el-table-column>
                 <el-table-column prop="invitationCode" label="邀请码" align="center">
                </el-table-column>
                <el-table-column prop="avatar" label="头像" align="center">
                    <template slot-scope="scope">
                        <img width="50" height="50" :src="scope.row.avatar" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="userStatus" label="是否冻结" align="center">
                    <template slot-scope="scope">
                        <span :class="[scope.row.userStatus == '是' ? 'freeze' : 'unFreeze']">{{scope.row.userStatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" align="center">
                </el-table-column>
                <el-table-column prop="sex" label="性别" align="center">
                   <template slot-scope="scope">
                        <span style="color: orange" v-if="scope.row.sex == 1">{{scope.row.sex}}</span>
                        <span style="color: red;" v-else>{{scope.row.sex}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--danger el-tag--small" style="cursor: pointer;" @click="freeze(scope.row)" size="mini">
                            冻结
                        </span>
                        <span class="el-tag el-tag--danger el-tag--small" style="cursor: pointer;" @click="unFreeze(scope.row)" size="mini">
                            解冻
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 50, 100, 200]"
                :page-size="pageSize"
                layout="->, sizes, prev, pager, next, jumper, total"
                :total="totalElements"
            ></el-pagination>
        </el-row>
        <!-- <addPush :off.sync="pushDialog" :rowData="rowdata"></addPush> -->
    </div>
</template>

<script>
    import { getCommonUserList,freezeOrUnFreezeUser, getMemberUserList } from "@/api/supermarket/user.js"
    import * as util from "@/util/util.js"
    export default {
        name: "commonUser",
        components: {
            // "addPush": () => import("@/views/goodsSupermarket/companyPush/addPush")
        },
        props: {
           
        },
        data(){
            return {
                name: "",
                membershipType: "",
                nickName: "",
                mobile: "",
                freezeStatus: "",
                freezeData: [
                    {label: "冻结", value: 2},
                    {label: "解冻", value: 1}
                ],
                orderNumber: "",
                noticeData: [],
                pageSize: 15,
                currentPage: 1,
                totalElements: 0,
                totalPages: 1,
                pushDialog: false,
                rowdata: {}
            }
        },
        created(){
            this.getList();
        },
        methods: {
            search(type){
                this.getList(type);
            },
            freeze(row){
               freezeOrUnFreezeUser({
                   userId: row.userId,
                   userStatus: 1
               }).then(
                   res => {
                       this.$notify.success("冻结成功");
                       this.getList();
                   },
                   err => {}
               );
            },
            unFreeze(row){
                console.log("row", row);
                 freezeOrUnFreezeUser({
                    userId: row.userId,
                    userStatus: 2
                }).then(
                    res => {
                        this.$notify.success("解冻成功");
                        this.getList();
                    },
                    err => {}
                );
            },
            getList(type){
                let obj = {
                    type: 1,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                };
                if(type == "nickName"){
                   obj = Object.assign({nickName: this.nickName}, obj);
                }else if(type == "mobile"){
                   obj = Object.assign({mobile: this.mobile}, obj);
                }else if(type == "userStatus"){
                   obj = Object.assign({userStatus: this.freezeStatus}, obj);
                }else if(type == "membershipType"){
                    obj = Object.assign({membershipType: this.$parent.memberType}, obj);
                }else if(type == "name"){
                    obj = Object.assign({name: this.$parent.memberLevel}, obj);
                }else if(type == "clear"){
                    this.$parent.memberType = "";
                    this.$parent.memberLevel = "";
                    this.nickName = "";
                    this.mobile = "";
                    this.freezeStatus = "";
                    obj = Object.assign({}, obj);
                }
                if(this.$route.meta.userType == "common"){
                    getCommonUserList(obj).then(
                       res => {
                           console.log("res普通用户接口", res);
                           this.noticeData = res.data.list;
                           this.totalElements = res.data.total;
                       },
                       err => {}
                   );
                }else{
                    getMemberUserList(obj).then(
                        res => {
                            this.noticeData = res.data.list;
                            this.totalElements = res.data.total;
                        },
                        err => {}
                    );
                }
                this.noticeData.forEach((e) => {
                    e.createDate = util.timestampToTime(e.createDate);
                    e.sex = e.sex == 1 ? "男" : "女";
                    if(e.userStatus == 1){
                        e.userStatus = "是";
                    }else{
                        e.userStatus = "否";
                    }
                });
            },
            //序号
            indexSort(index) {
                if (this.currentPage > 1) {
                    index = (this.currentPage - 1) * this.pageSize + index + 1;
                } else {
                    index = index + 1;
                }
                return index;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getList();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList();
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="less" props>
.commonUser {
    .freeze{
        color: blue;
    }
    .unFreeze{
        color: brown;
    }
}
</style>